<template>
  <Dialog title="维护" v-model="dialogVisible">
    <div class="maintain-list">
      <el-table height="500px" :data="list" v-loading="loading">
        <el-table-column label="物品名称" prop="name" />
        <el-table-column label="状态" min-width="200px">
          <template #default="{ row }">
            <RoomSelfCheckRow :data="row" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { RoomReserveApi } from '@/api/school/room/reserve'
import RoomSelfCheckRow from '../components/RoomSelfCheckRow.vue'
const message = useMessage()
const dialogVisible = ref(false)
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const list = ref([])
const loading = ref(false)
const formLoading = ref(false)
let reserveId = '' // 预约id
const open = async ({ id }) => {
  try {
    loading.value = true
    reserveId = id
    const valueJSONString = await RoomReserveApi.getRoomMaintain(id)
    if (valueJSONString) {
      const valueList = JSON.parse(valueJSONString)
      list.value = valueList
    }
    dialogVisible.value = true
  } finally {
    loading.value = false
  }
}
// 提交表单
const submitForm = async () => {
  try {
    formLoading.value = true
    await RoomReserveApi.updateRoomMaintain({
      id: reserveId,
      maintain: JSON.stringify(list.value)
    })
    message.success('提交成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
defineExpose({
  open
})
</script>
<style lang="scss" scoped></style>
